<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>用户管理</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
    <link rel="stylesheet" href="./css/user.css" />
  </head>
  <body>
    <div id="app">
      <div class="card">
        <div class="card-body">
          <!-- 1. 添加用户按钮 -->
          <button
            type="button"
            class="btn btn-primary"
            data-bs-toggle="modal"
            data-bs-target="#saveUserModal"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="16"
              height="16"
              fill="currentColor"
              class="bi bi-plus-lg"
              viewBox="0 0 16 16"
            >
              <path
                fill-rule="evenodd"
                d="M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2Z"
              />
            </svg>
            添加用户
          </button>

          <!-- 2. 表格 -->
          <table class="table table-bordered">
            <thead>
              <tr>
                <th scope="col">序号</th>
                <th scope="col">用户名</th>
                <th scope="col">用户昵称</th>
                <th scope="col">操作</th>
              </tr>
            </thead>
            <tbody>
              <!-- <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>
                  <button type="button" class="btn btn-warning">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      fill="currentColor"
                      class="bi bi-pencil-square"
                      viewBox="0 0 16 16"
                    >
                      <path
                        d="M15.502 1.94a.5.5 0 0 1 0 .706L14.459 3.69l-2-2L13.502.646a.5.5 0 0 1 .707 0l1.293 1.293zm-1.75 2.456-2-2L4.939 9.21a.5.5 0 0 0-.121.196l-.805 2.414a.25.25 0 0 0 .316.316l2.414-.805a.5.5 0 0 0 .196-.12l6.813-6.814z"
                      />
                      <path
                        fill-rule="evenodd"
                        d="M1 13.5A1.5 1.5 0 0 0 2.5 15h11a1.5 1.5 0 0 0 1.5-1.5v-6a.5.5 0 0 0-1 0v6a.5.5 0 0 1-.5.5h-11a.5.5 0 0 1-.5-.5v-11a.5.5 0 0 1 .5-.5H9a.5.5 0 0 0 0-1H2.5A1.5 1.5 0 0 0 1 2.5v11z"
                      />
                    </svg>
                    修改用户
                  </button>
                  <button type="button" class="btn btn-danger">
                    <svg
                      xmlns="http://www.w3.org/2000/svg"
                      width="16"
                      height="16"
                      fill="currentColor"
                      class="bi bi-trash3"
                      viewBox="0 0 16 16"
                    >
                      <path
                        d="M6.5 1h3a.5.5 0 0 1 .5.5v1H6v-1a.5.5 0 0 1 .5-.5ZM11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3A1.5 1.5 0 0 0 5 1.5v1H2.506a.58.58 0 0 0-.01 0H1.5a.5.5 0 0 0 0 1h.538l.853 10.66A2 2 0 0 0 4.885 16h6.23a2 2 0 0 0 1.994-1.84l.853-10.66h.538a.5.5 0 0 0 0-1h-.995a.59.59 0 0 0-.01 0H11Zm1.958 1-.846 10.58a1 1 0 0 1-.997.92h-6.23a1 1 0 0 1-.997-.92L3.042 3.5h9.916Zm-7.487 1a.5.5 0 0 1 .528.47l.5 8.5a.5.5 0 0 1-.998.06L5 5.03a.5.5 0 0 1 .47-.53Zm5.058 0a.5.5 0 0 1 .47.53l-.5 8.5a.5.5 0 1 1-.998-.06l.5-8.5a.5.5 0 0 1 .528-.47ZM8 4.5a.5.5 0 0 1 .5.5v8.5a.5.5 0 0 1-1 0V5a.5.5 0 0 1 .5-.5Z"
                      />
                    </svg>
                    删除用户
                  </button>
                </td>
              </tr> -->
            </tbody>
          </table>

          <!-- 3. 分页器 -->
          <nav aria-label="Page navigation">
            <ul class="pagination justify-content-center">
              <!-- <li class="page-item">
                <a class="page-link" href="#" aria-label="Previous">
                  <span aria-hidden="true">&laquo;</span>
                </a>
              </li>
              <li class="page-item active">
                <a class="page-link" href="#">1</a>
              </li>
              <li class="page-item"><a class="page-link" href="#">2</a></li>
              <li class="page-item"><a class="page-link" href="#">3</a></li>
              <li class="page-item">
                <a class="page-link" href="#" aria-label="Next">
                  <span aria-hidden="true">&raquo;</span>
                </a>
              </li> -->
            </ul>
          </nav>
        </div>
      </div>

      <!-- 添加用户对话框 -->
      <div
        class="modal fade"
        id="saveUserModal"
        tabindex="-1"
        aria-labelledby="saveUserModalLabel"
        aria-hidden="true"
      >
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h1 class="modal-title fs-5" id="saveUserModalLabel">添加用户</h1>
              <button
                type="button"
                class="btn-close"
                data-bs-dismiss="modal"
                aria-label="Close"
              ></button>
            </div>
            <!-- 
              给form表单提交表单的事件submit，在事件中给form表单添加一个类名：was-validated
              一旦添加类名，bootstrap内部会触发表单校验规则

              注意：form需要包裹表单项和提交表单的按钮
            -->
            <form class="needs-validation" novalidate>
              <div class="modal-body">
                <div class="mb-3">
                  <label for="usernameInput" class="form-label"> 用户名 </label>
                  <!-- required 就是表单校验的规则，必填项 -->
                  <input
                    type="text"
                    class="form-control"
                    id="usernameInput"
                    placeholder="请输入用户名"
                    required
                  />
                  <!-- 表单校验失败提示的错误信息 -->
                  <div class="invalid-feedback">用户名不能为空</div>
                </div>
                <div class="mb-3">
                  <label for="passwordInput" class="form-label"> 密码 </label>
                  <!-- required 就是表单校验的规则，必填项 -->
                  <input
                    type="password"
                    class="form-control"
                    id="passwordInput"
                    placeholder="请输入密码"
                    required
                  />
                  <!-- 表单校验失败提示的错误信息 -->
                  <div class="invalid-feedback">密码不能为空</div>
                </div>
                <div class="mb-3">
                  <label for="nicknameInput" class="form-label">
                    用户昵称
                  </label>
                  <!-- required 就是表单校验的规则，必填项 -->
                  <input
                    type="text"
                    class="form-control"
                    id="nicknameInput"
                    placeholder="请输入用户昵称"
                    required
                  />
                  <!-- 表单校验失败提示的错误信息 -->
                  <div class="invalid-feedback">用户昵称不能为空</div>
                </div>
              </div>
              <div class="modal-footer">
                <button
                  type="button"
                  class="btn btn-secondary"
                  data-bs-dismiss="modal"
                >
                  取消
                </button>
                <!-- 按钮 type="submit" 用来提交表单 -->
                <button type="submit" class="btn btn-primary">保存</button>
              </div>
            </form>
          </div>
        </div>
      </div>

      <!-- 修改用户对话框 -->
      <div
        class="modal fade"
        id="updateUserModal"
        tabindex="-1"
        aria-labelledby="updateUserModalLabel"
        aria-hidden="true"
      >
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h1 class="modal-title fs-5" id="updateUserModalLabel">
                修改用户
              </h1>
              <button
                type="button"
                class="btn-close"
                data-bs-dismiss="modal"
                aria-label="Close"
              ></button>
            </div>
            <form class="update-user-form" novalidate>
              <div class="modal-body">
                <div class="mb-3">
                  <label class="form-label">用户名</label>
                  <p class="update-username">xxx</p>
                </div>
                <div class="mb-3">
                  <label for="updatePasswordInput" class="form-label">
                    密码
                  </label>
                  <input
                    type="password"
                    class="form-control"
                    id="updatePasswordInput"
                    required
                  />
                  <div class="invalid-feedback">密码不能为空</div>
                </div>
                <div class="mb-3">
                  <label for="updateNicknameInput" class="form-label">
                    用户昵称
                  </label>
                  <input
                    type="text"
                    class="form-control"
                    id="updateNicknameInput"
                    required
                  />
                  <div class="invalid-feedback">用户昵称不能为空</div>
                </div>
              </div>
              <div class="modal-footer">
                <button
                  type="button"
                  class="btn btn-secondary"
                  data-bs-dismiss="modal"
                >
                  取消
                </button>
                <button type="submit" class="btn btn-primary">保存</button>
              </div>
            </form>
          </div>
        </div>
      </div>

      <!-- 删除用户对话框 -->
      <div
        class="modal fade"
        id="removeUserModal"
        tabindex="-1"
        aria-labelledby="removeUserModalLabel"
        aria-hidden="true"
      >
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h1 class="modal-title fs-5" id="removeUserModalLabel">
                删除用户
              </h1>
              <button
                type="button"
                class="btn-close"
                data-bs-dismiss="modal"
                aria-label="Close"
              ></button>
            </div>
            <div class="modal-body">
              <p>您确认要删除 <span class="remove-username"></span> 用户吗?</p>
            </div>
            <div class="modal-footer">
              <button
                type="button"
                class="btn btn-secondary"
                data-bs-dismiss="modal"
              >
                取消
              </button>
              <button type="button" class="btn btn-primary remove-submit-btn">
                确定
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="./js/bootstrap.bundle.min.js"></script>
    <script src="./js/axios.min.js"></script>
    <script src="./js/request.js"></script>
    <script src="./js/user.js"></script>
  </body>
</html>
